<template>
  <div class="table-box">
    <el-button
      type="primary"
      icon="CirclePlus"
      @click="handleOpen('add', 0)"
      v-auth="'department/add'"
      :style="{ marginBottom: '10px' }"
      >新增部门</el-button
    >
    <el-table
      :data="tableData"
      row-key="id"
      default-expand-all
      height="100%"
      stripe
    >
      <el-table-column type="index" label="#" fixed="left" />
      <el-table-column prop="title" label="部门名称" fixed="left" />
      <el-table-column label="部门经理">
        <template #default="scope">
          <div v-if="scope.row.managerUser">
            {{
              scope.row.managerUser.real_name || scope.row.managerUser.nickName
            }}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="managerUser.mobile" label="手机号" />
      <el-table-column prop="sort" label="排序" />
      <el-table-column label="操作" fixed="right" width="350">
        <template #default="scope">
          <el-button
            type="primary"
            link
            icon="Edit"
            @click="handleOpen('edit', scope.row.id)"
            v-auth="'department/edit'"
          >
            编辑
          </el-button>
          <el-button
            type="primary"
            link
            icon="User"
            @click="handleStaff(scope.row.id)"
          >
            部门成员
          </el-button>
          <el-button
            type="primary"
            link
            icon="User"
            @click="handleStation(scope.row.id)"
          >
            部门岗位
          </el-button>
          <el-button
            type="danger"
            link
            icon="DeleteFilled"
            @click="delInfo(scope.row.id)"
            v-auth="'department/del'"
            v-if="scope.row.keep != 1"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <DialogForm ref="childDialogForm" @getTable="getTableInfo" />
    <Staff ref="staffRef"></Staff>
    <Station ref="stationRef"></Station>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, defineEmits } from "vue";
import {
  getDepartmentList,
  addDepartment,
  editDepartment,
  getDepartmentForm,
  deleteDepartment,
} from "@/api/company/department";
import DialogForm from "./component/dialogForm.vue";
import Staff from "./component/Staff.vue";
import Station from "./component/Station.vue";
import { ElMessage, ElMessageBox } from "element-plus";
const childDialogForm = ref<any>(null);
const tableData = ref([]);
const staffRef = ref<any>(null);
  const stationRef = ref<any>(null);
onMounted(() => {
  getTableInfo();
  //tableTree.value = buildTree(0,tableData.value)
  //console.log(tableTree.value)
});

function getTableInfo() {
  getDepartmentList().then((res) => {
    tableData.value = res.data;
  });
}

function delInfo(id: number) {
  ElMessageBox.confirm("确认要删除此信息吗?", "警告！", {
    confirmButtonText: "确认删除",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      deleteDepartment(id).then((res: any) => {
        getTableInfo();

        ElMessage({
          type: "success",
          message: "删除成功！",
        });
      });
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "删除已取消",
      });
    });
}

// 打开添加数据窗口
const emits = defineEmits(["openForm", "search"]);
function handleOpen(type: string, id: number) {
  childDialogForm.value.dialogOpen(type, id);
}

const handleStaff = (id: number) => {
  staffRef.value.handleOpen(id);
};
const handleStation = (id: number) => {
  stationRef.value.handleOpen(id);
};
defineExpose({
  getTableInfo,
});
</script>

<style scoped>
.table-box {
  height: calc(100% - 200px);
}
</style>
